<template>
  <div
    class="layout-header topbar"
    style="padding: 0px; width: 100%;"
    v-if="header.open"
  >
    <sui-menu style="background-color:white;">
      <!-- 使菜单居中 -->
      <div class="ui container">
        <a
          class="item i-mobile"
          id="menu-button"
          @click.stop="toggleSidebar"
        >
          <i class="github icon"></i>
        </a>
        <div class="left menu">
          <a
            is="sui-menu-item"
            v-for="item in header.items"
            :active="isActive(item.name)"
            :key="item.name"
            :content="item.name"
            @click="selectHeaderMenu(item.name),shift(item.path)"
          />
        </div>
        <div class="right menu">
          <div class="item i-search-menu">
            <sui-dropdown
              floating
              labeled
              direction="downward"
              search
              icon="search"
              :options="header.skills"
              placeholder="搜索"
              selection
              v-model="current"
              @click="modalToggle"
            />
          </div>
          <sui-dropdown
            direction="downward"
            icon="null"
            button
            pointing="top right"
            style="margin:0;"
            class="item i-mobile circular"
          >
            <sui-image
                      :src="image('avator',`${baseUrl}elliot.jpg`)"
              class="right floated"
              size="mini"
              circular
            />
            <sui-dropdown-menu>
              <sui-dropdown-item>个人信息</sui-dropdown-item>
              <sui-dropdown-item>地址管理</sui-dropdown-item>
              <sui-dropdown-item>消息管理</sui-dropdown-item>
              <!-- <sui-dropdown-item>
                <sui-icon name="folder" />Move to folder</sui-dropdown-item>
              <sui-dropdown-item>
                <sui-icon name="trash" />Move to trash</sui-dropdown-item>-->
              <sui-dropdown-divider />
              <sui-dropdown-item>消息中心</sui-dropdown-item>
              <sui-dropdown-item>信息反馈</sui-dropdown-item>
              <sui-dropdown-divider />
              <sui-dropdown-item @click="logout">退出</sui-dropdown-item>
            </sui-dropdown-menu>
          </sui-dropdown>
          <sui-dropdown
            class="item icon i-tablet"
            icon="cog"
          >
            <sui-dropdown-menu>
              <sui-dropdown-item>保存搜索结果</sui-dropdown-item>
            </sui-dropdown-menu>
          </sui-dropdown>
        </div>
      </div>
    </sui-menu>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import base64 from "@/mixins/base64";
import router from "@/mixins/router";
export default {
  name: "zui-header",
  mixins: [router, base64],
  data() {
    return {
      baseUrl: process.env.BASE_URL
    };
  },
  computed: {
    ...mapGetters(["header", "search"]),
    current: {
      get() {
        return this.$store.state.app.header.current;
      },
      set(value) {
        this.$store.dispatch("set_header_menu", {
          key: "current",
          value: value
        });
      }
    }
  },
  methods: {
    ...mapActions(["toggleSidebar", "selectHeaderMenu", "toggleSearchModal"]),
    pushHistory() {
      var state = {
        title: "搜索栏搜索",
        url: "#"
      };
      window.history.pushState(state, "搜索栏搜索", "#");
    },
    modalToggle() {
      if (window.screen.width <= 768) {
        if (this.search.modal.open == false) {
          this.pushHistory();
        } else {
          window.history.back();
        }
        this.toggleSearchModal();
      }
    },
    logout() {
      const { dispatch } = this.$store;
      const _self = this;
      dispatch("authentication/logout").then(response => {
        window.location.assign(`http://localhost:8080/`);
      });
    }
  }
};
</script>

<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
.layout-header {
  background: #ffffff;
  padding: 0 50px;
  line-height: 64px;
}
.topbar {
  backface-visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}
.ui.menu:not(.vertical) > .ui.container {
  & > .item.i-mobile {
    padding: 1.25em 1.4em;
    display: flex;
    @media (min-width: @mobile) {
      display: none;
    }
  }
  & > .left.menu {
    display: none;
    @media (min-width: @mobile) {
      display: flex;
    }
  }
  .right.menu {
    & /deep/ .i-search-menu {
      @media (max-width: @mobile) {
        padding-right: 1px;
        padding-left: 0px;
      }
    }
    & > .item.i-mobile {
      padding: 0;
      margin: 0;
      display: none;
      height: 35px;
      align-self: center;
      @media (min-width: @mobile) {
        display: flex;
      }
      &:focus {
        box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px rgba(152, 28, 235, 0.4);
      }
      & /deep/ .null.icon {
        display: none;
      }
      & /deep/ img {
        margin: 0;
        padding: 0;
      }
    }
    & > .item.i-tablet {
      padding: 1.25em 1.4em;
      display: none;
      @media (max-width: @mobile) {
        display: flex;
      }
      &:hover {
        background: none;
      }
      & /deep/ .icon {
        color: black;
      }
    }
  }
}
.ui.search.selection.dropdown {
  & /deep/ .search.icon {
    margin: -0.98571429em;
  }
}
.ui.dimmer.modals.page {
  & /deep/ .ui.standart.modal.transition {
    @media (max-width: @mobile) {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
